<template>
  <div class="app-container travelApplication">
    <div class="yt-data-list">
      <div class="yt-list-title">
        <span>{{ $t("travelManagement.travelApplication.title") }}</span>
      </div>
      <div class="data-list" style="border:none;margin-top:0px;">
        <div class="list-operation">
          <!--新增-->
          <el-button
            type="primary"
            class="yt-btn-ys"
            @click="addTravelApplication"
          >{{ $t("button.new") }}
          </el-button>
          <!--删除-->
          <el-button type="primary" class="yt-btn" @click="handleDelete">{{
            $t("button.delete")
            }}
          </el-button>
          <!--已提交的差旅費表，請至「我的申請」中瀏覽-->
          <div style="margin-right: 10px;float:right">
            <span type="primary" class="yt-btn" @click="gotoMyApplication">
              {{ $t("travelManagement.travelApplication.gotoMyApplicationOne") }}
              <b><font color="#0080ff">{{ $t("travelManagement.travelApplication.gotoMyApplicationTwo") }}</font></b>
              {{ $t("travelManagement.travelApplication.gotoMyApplicationThree") }}
            </span>
          </div>
        </div>
        <el-table :data="list" :empty-text="$t('placeholder.emptyText')" class="yt-table" border fit highlight-current-row style="width:100%"
                  @selection-change="handleSelectionChange" max-height="600">
          <el-table-column align="center" type="selection" width="50" prop="id"/>
          <el-table-column align="center" type="index" :label="$t('travelManagement.travelApplication.serialNumber')">
          </el-table-column>
          <el-table-column align="center" :label="$t('travelManagement.travelApplication.applicationName')">
            <template slot-scope="scope">
              <span class="tb-color" style="cursor: pointer;"
                    @click="updateTravelApplication(scope.row)">{{ $t("travelManagement.travelApplication.domesticTravelApplication") }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="projectNo" align="center" :label="$t('travelManagement.travelApplication.projectNo')">
          </el-table-column>
          <el-table-column prop="projectName" align="center" :label="$t('travelManagement.travelApplication.projectName')">
          </el-table-column>
          <el-table-column prop="employEName" align="center" :label="$t('travelManagement.travelApplication.employEName')">
          </el-table-column>
          <el-table-column prop="updateTime" align="center" :label="$t('travelManagement.travelApplication.updateTime')" :formatter="formatter.formatTimes">
          </el-table-column>
          <el-table-column prop="applyEName" align="center" :label="$t('travelManagement.travelApplication.applyEName')">
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            :current-page.sync="listQuery.page"
            :page-sizes="[10, 20, 30, 50, 100, 200]"
            :page-size="listQuery.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import formatter from '@/utils/formatter'
  import {
    selectList,
    travelDelete
  } from '@/api/travelManagement/travelApplication';

  export default {
    name: 'travelApplication',
    data() {
      return {
        formatter,
        config: Config.I18n,
        total: 0,
        listLoading: true,
        list: [],
        //  修改的数据
        modification: [],
        listQuery: {
          order: '', // 降序（desc）/升序（asc）
          orderBy: '', // 排序字段
          page: 1,
          limit: 10
        }
      }
    },
    mounted() {
      this.getList();
    },
    methods: {
      handleSelectionChange(val) {
        this.modification = val;
      },
      addTravelApplication() {
        this.$router.push({ path: '/travelManagement/travelApplicationDetails' })
      },
      updateTravelApplication(list) {
        console.log(list)
        const fId = list.id
        this.$router.push({ path: '/travelManagement/travelApplicationDetails', query: { id: fId } })
      },
      getList() {
        const applyId = this.$store.getters.info.id
        selectList({ status: '0', applyUserId: applyId }).then(res => {
          if (res.status === 200) {
            this.list = res.data.rows
            this.total = res.data.total
            console.log(res)
          } else {
            this.$message.error(res.message);
          }
        });
      },
      handleDelete() {
        console.log(this.modification);
        if (this.modification.length > 0) {
          const arr = []; // 存放已修改的
          this.modification.forEach(item => {
            arr.push(item.id);
          });
          this.$confirm(this.$t('travelManagement.travelApplication.tips.delete'), this.$t('travelManagement.travelApplication.tips.tips'), {
            confirmButtonText: this.$t('travelManagement.travelApplication.tips.determine'),
            cancelButtonText: this.$t('travelManagement.travelApplication.tips.cancel'),
            type: 'warning',
            center: true
          })
            .then(action => {
              if (action === 'confirm') {
                // const data = {
                //   ids: arr
                // }
                travelDelete(arr).then(res => {
                  this.$notify({
                    title: res.status === 200 ? this.$t('travelManagement.travelApplication.tips.deleteSuccess') : this.$t('travelManagement.travelApplication.tips.fail'),
                    message: res.status === 200 ? this.$t('travelManagement.travelApplication.tips.deleteSuccess') : res.message,
                    type: res.status === 200 ? 'success' : 'warning'
                  });
                  this.getList();
                });
              }
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: this.$t('travelManagement.travelApplication.tips.cancelled')
              });
            });
        } else {
          this.$notify({
            title: this.$t('travelManagement.travelApplication.tips.fail'),
            message: this.$t('travelManagement.travelApplication.tips.aRecord'),
            type: 'warning'
          });
        }
      },
      gotoMyApplication() {
        this.$router.push({ path: '/demandManager/myApplication' })
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      }

    }
  };
</script>
<style scoped>
</style>
